import React, { memo } from 'react';
import { useSelector, shallowEqual } from 'react-redux';

import { PlayerPanelWrapper } from "./style";
import PanelHeader from "./cpns/panel-header";
import PanelList from "./cpns/panel-list";
import PanelLyric from "./cpns/panel-lyric";

const PlayerPanel = memo((props) => {
  const { currentSong } = useSelector(state => ({
    currentSong: state.getIn(["player", "currentSong"])
  }), shallowEqual);

  const changeShowPanle = () => {
    props.handlerIsShowPanel()
  };

  return (
    <PlayerPanelWrapper>

      <PanelHeader changeShowPanle={changeShowPanle} />

      <div className="main">
        <img src={currentSong.al.picUrl} alt="" className="image" />

        <PanelList />

        <PanelLyric />
      </div>
    </PlayerPanelWrapper>
  )
})

export default PlayerPanel